<template>
  <!--实物管理 -->
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="兑换时间">
          <el-date-picker
            v-model="formInline.date"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input
            v-model="formInline.orderId"
            placeholder="请输入订单编号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select
            v-model="formInline.orderStatus"
            placeholder="请选择状态"
            clearable
          >
            <el-option
              v-for="(item, index) in orderOptions"
              :label="item.label"
              :value="item.value"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input
            v-model="formInline.accountName"
            placeholder="请输入买家姓名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input
            v-model="formInline.accountPhone"
            placeholder="请输入联系方式"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input
            v-model="formInline.goodsName"
            placeholder="请输入商品名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchFn()">搜索</el-button>
        </el-form-item>
        <div class="z-flex">
          <div>
            <span class="margin-right20">订单总金额：{{ totalCoins }}金币</span>
            <span>兑换商品数：{{ totalExchange }}件</span>
          </div>
          <div class="z-flex">
            <el-upload
              ref="uploadExl"
              action
              multiple
              :limit="1"
              :http-request="importData"
              :before-upload="beforeUpload"
              :show-file-list="false"
            >
              <el-button type="primary" class="u-btn">物流信息导入</el-button>
            </el-upload>
            <el-button
              type="primary"
              @click="exportdata()"
              class="margin-left20"
              >导出兑换明细</el-button
            >
          </div>
        </div>
      </el-form>
    </div>
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        header-cell-class-name="thead"
      >
        <el-table-column label="订单编号" prop="id">
          <template slot-scope="scope">
            <a @click="handleDetail(scope.row)">{{ scope.row.id }}</a>
          </template>
        </el-table-column>
        <el-table-column
          label="订单金额(币)"
          prop="coinsCount"
        ></el-table-column>
        <el-table-column label="商品名称" prop="goodsName"></el-table-column>
        <el-table-column label="商品数量" prop="goodsCount"></el-table-column>
        <el-table-column label="订单状态" prop="orderStatus">
          <template slot-scope="scope">
            <p>{{ scope.row.orderStatus | fliterStatus(orderOptions) }}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="兑换时间"
          prop="createTime"
          width="200"
        ></el-table-column>
        <el-table-column label="买家姓名">
          <template slot-scope="scope">
            <p>{{ scope.row.accountName }}</p>
            <p>{{ scope.row.accountPhone }}</p>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import {
  getIntegralOrderList,
  exportOrderList,
  importOrderList
} from '@/api/order.js'
import _ from 'underscore'
export default {
  data () {
    return {
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      formInline: {
        date: [],
        orderId: '',
        accountName: '',
        goodsName: '',
        accountPhone: '',
        orderStatus: ''
      },
      tableData: [],
      totalExchange: 0,
      orderOptions: [
        { label: '已付款', value: 1 },
        { label: '已发货', value: 2 }
      ],
      totalCoins: 0
    }
  },
  created () {
    this.formInline.date = []
    var date = new Date()
    var month = parseInt(date.getMonth() + 1)
    var day = date.getDate()
    let startTime
    let endTime
    if (month < 10) month = '0' + month
    if (day < 10) day = '0' + day
    startTime = date.getFullYear() + '-' + month + '-' + '01' + ' 00:00:00'

    var date2 = new Date()
    var year = date2.getFullYear()
    var month2 = date2.getMonth() + 1
    month2 = month2 < 10 ? '0' + month2 : month2
    var day2 = new Date(year, month2, 0)
    endTime = year + '-' + month2 + '-' + day2.getDate() + ' 23:59:59'
    this.formInline.date.push(startTime)
    this.formInline.date.push(endTime)
    console.log('date', this.formInline.date)
  },
  activated () {
    this.getDataList()
  },
  filters: {
    fliterStatus (value, data) {
      let res = _.filter(data, function (item) {
        return item.value === value
      })
      if (res.length) {
        return res[0].label
      } else {
        return ''
      }
    }
  },
  methods: {
    async getDataList () {
      let res = await getIntegralOrderList({
        pageNum: this.pageIndex,
        size: this.pageSize,
        startTime:
          this.formInline.date && this.formInline.date.length
            ? this.formInline.date[0]
            : null,
        endTime:
          this.formInline.date && this.formInline.date.length
            ? this.formInline.date[1]
            : null,
        orderId: this.formInline.orderId,
        orderStatus: this.formInline.orderStatus,
        accountPhone: this.formInline.accountPhone,
        accountName: this.formInline.accountName,
        goodsName: this.formInline.goodsName
      })
      if (res[0]) {
        return
      }
      if (res[1].code == 0) {
        this.totalPage = res[1].totalCount
        this.tableData = res[1].orderList
        this.totalCoins = res[1].totalCoins
        this.totalExchange = res[1].totalExchange
        if (this.tableData && this.tableData.length) {
          this.tableData.forEach(ele => {
            ele.accountPhone = ele.accountPhone
              ? ele.accountPhone.substring(0, 3) +
                '****' +
                ele.accountPhone.substring(7, 11)
              : ''
          })
        }
      }
    },
    beforeUpload (file) {
      const isExcel =
        file.type === 'application/vnd.ms-excel' ||
        file.type ===
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      const isLt100M = file.size / 1024 / 1024 < 200

      if (!isExcel) {
        this.$message.error('上传的文件只能是 xls 或 xlsx 格式!')
      }
      if (!isLt100M) {
        this.$message.error('上传的文件大小不能超过 200MB!')
      }
      return isExcel && isLt100M
    },
    async exportdata () {
      let res = await exportOrderList({
        startTime:
          this.formInline.date && this.formInline.date.length
            ? this.formInline.date[0]
            : null,
        endTime:
          this.formInline.date && this.formInline.date.length
            ? this.formInline.date[1]
            : null,
        orderId: this.formInline.orderId,
        orderStatus: this.formInline.orderStatus,
        userName: this.formInline.userName,
        goodsName: this.formInline.goodsName
      })
      if (res.status === 200) {
        let filename = decodeURI('兑换明细.xlsx')
        filename = filename.replace(/\"/g, '')
        this.$downloadExcel(res.data, filename)
      }
    },
    async importData (e) {
      let formData = new FormData()
      formData.append('file', e.file)
      let res = await importOrderList(formData)
      if (res[0]) {
        return
      }
      this.$message.success('导入物流信息成功！')
      this.getDataList()
      this.$ref.uploadExl.clearFiles()
    },
    handleDetail (row) {
      this.$router.push({
        name: 'integral-order-details',
        query: {
          order_id: row.id
        }
      })
    },
    searchFn () {
      this.pageIndex = 1
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    }
  }
}
</script>
<style scoped>
a {
  cursor: pointer;
}
.z-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
</style>
